<template>
  <up-loading-page
    :loading="loading"
    loading-mode="spinner"
    bg-color="rgba(0, 0, 0, 0.3)"
    color="#f7f7f7"
    loadingColor="#f7f7f7"
    :fontSize="loadingSize"
    :iconSize="iconSize"
    loading-text="加载中..."
    :style="{
      top: top + 'px',
      bottom: bottom + 'px'
    }"
  ></up-loading-page>
</template>

<script setup>
defineOptions({
  name: 'LoadingPage',
  inheritAttrs: false
})

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  isTitle: {
    type: Boolean,
    default: true
  },
  isTabbar: {
    type: Boolean,
    default: false
  },
  loadingSize: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(26)
  },
  iconSize: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(34)
  }
})

const top = ref(0)
const bottom = ref(0)

onMounted(_ => {
  const { titleHeight, tabbarHeight } = g_utils.getPageNum(
    props.isTitle,
    props.isTabbar
  )
  top.value = titleHeight
  bottom.value = tabbarHeight
})
</script>

<style lang="scss" scoped></style>
